<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>发布文章</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display: flex">
      <el-select v-model="Blog.type_id" placeholder="请选择文章分类">
        <el-option
            v-for="(item,key) in types"
            :key="key"
            :label="item.type"
            :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="Blog.title" placeholder="请输入文章标题" style="width: 400px;margin-left: 20px;margin-right: 20px"></el-input>
      <el-select v-model="Blog.tag_id" value-key="value" multiple placeholder="请选择文章标签">
        <el-option
            v-for="(item,key) in tags"
            :key="key"
            :label="item.tag"
            :value="item.id">
        </el-option>
      </el-select>
      <el-upload
        class="upload-demo"
        action="http://localhost:8082/api/upload/picture"
        :on-success="handleSuccess"
        multiple
        :limit="1"
        :file-list="fileList">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <el-input style="margin-bottom: 10px" type="textarea" :rows="2" placeholder="请输入文章概述" v-model="Blog.description" resize="none"></el-input>
    <mavon-editor
        v-model="content"
        ref="md"
        @change="change"
        @imgAdd="$imgAdd"
        style="min-height: 600px"
    />
    <div style="display: flex;margin-top: 10px;justify-content: flex-end;">
      <el-button>随笔保存草稿</el-button>
      <el-button type="success" @click="publishBlog(false)">博客保存草稿</el-button>
      <el-button type="info">发布随笔</el-button>
      <el-button type="primary" @click="publishBlog(true)">发布博客</el-button>
    </div>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  data () {
    return {
      fileList: [],
      content: '',
      html: '',
      types: [],
      tags: [],
      Blog: {
        author: window.sessionStorage.getItem('username'),
        title: '',
        type_id: '',
        views: '',
        likes: '',
        first_picture: '',
        description: '',
        published: '',
        content: '',
        uid: window.sessionStorage.getItem('uid'),
        tag_id: [],
        text_content: ''
      }
    }
  },
  components: {
    mavonEditor
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd (pos, $file) {
      const formdata = new FormData()
      formdata.append('file', $file)
      this.$axios.post('/upload/picture', formdata).then(res => {
        this.$refs.md.$img2Url(pos, res.data.data)
      }).catch(err => {
        console.log(err)
      })
    },
    change (value, render) {
      this.html = render
      this.Blog.content = render
      this.Blog.text_content = value
      // console.log(render)
    },
    getTags () {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('/tag/getAllTags', {
        params: {
          current: 1,
          size: 20
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'tags', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getTypes () {
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.get('/type/getAllTypes', {
        params: {
          current: 1,
          size: 20
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'types', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    handleSuccess (response, file, fileList) {
      this.Blog.first_picture = response.data
    },
    publishBlog (published) {
      this.Blog.published = published
      this.Blog.tag_id = '' + this.Blog.tag_id
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('/blog/publishBlog', this.Blog).then(response => {
        if (response.data.code !== '200') this.$message.error('添加失败')
        else if (published && response.data.code === '200') this.$message.success('博客发布成功!')
        else if (published && response.data.code === '200') this.$message.success('博客保存成功!')
      })
    },
    publishEssay (published) {
      this.Blog.published = published
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('/essay/publishEssay', this.Blog).then(response => {
        if (response.data.code !== '200') this.$message.error('添加失败')
        else if (published === 1 && response.data.code === '200') this.$message.success('随笔发布成功!')
        else if (published === 0 && response.data.code === '200') this.$message.success('随笔保存成功!')
      })
    }
  },
  mounted () {
    this.getTags()
    this.getTypes()
  }
}
</script>

<style lang="less" scoped>
.upload-demo{
  margin-left: 20px;
}
</style>
